<template>
  <el-card class="box-card">
    <ul class="msg-box">
      <li>
        <h4>我要充值(余额{{userData.money}}元)</h4>
      </li>
      <li>
        <h4 style="margin-bottom: 15px;">充值金额</h4>
        <el-radio-group v-model="amountVal" @change="amountChange">
          <el-radio border :label="''+ 100">充值100</el-radio>
          <el-radio border :label="''+ 500">充值500</el-radio>
          <el-radio border :label="''+ 1000">充值1000</el-radio>
          <el-radio border :label="''+ 2000">充值2000</el-radio>
          <el-radio border :label="''+ 5000">充值5000</el-radio>
          <el-radio border :label="''">自定义</el-radio>
        </el-radio-group>
      </li>
      <li>
        <h4 style="margin-bottom: 15px;">充值方式</h4>
        <el-radio-group v-model="rechargeParams.paymentType" @change="paymentTypeChange">

          <el-radio border :label="''+ 1">支付宝</el-radio>
        </el-radio-group>
      </li>
      <li>
        <h4 style="margin-bottom: 15px;">充值金额，实际到账{{Math.floor(rechargeParams.totalAmt * 1.1)}}</h4>
        <el-input :disabled="disabled" clearable v-model="rechargeParams.totalAmt" placeholder="请输入金额" style="width: 150px;"></el-input>
      </li>
    </ul>
    <div style="text-align: center; margin-top: 30px;">
      <el-button type="primary" @click="surePay">确认支付</el-button>
    </div>

    <el-table :data="filteredData" style="width: 100%">
      <el-table-column prop="orderId" label="订单id"></el-table-column>
      <el-table-column prop="paymentType" label="支付方式">
        <template slot-scope="scope">
          {{ scope.row.paymentType === 1 ? '支付宝' : '微信' }}
        </template>
      </el-table-column>
      <el-table-column prop="transType" label="交易类型">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ transTypeList.find(item => item.value === scope.row.transType).label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalAmt" label="付款金额"></el-table-column>
      <el-table-column prop="realAmt" label="到账金额"></el-table-column>
      <el-table-column prop="paySuccessTime" label="支付成功时间"></el-table-column>
    </el-table>

    <!-- 使用 Element UI 的分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pagebean.total"
      :page-size="pagebean.pagesize"
      :current-page="pagebean.pagenow"
      @current-change="handleCurrentChange"
    ></el-pagination>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>是否已经支付成功？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="refresh()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>

const transTypeList = [
  {
    value: 0,
    label: '充值'
  },
  {
    value: 1,
    label: '消费'
  },
  {
    value: 2,
    label: '预约取消'
  }
]

export default {
  data() {
    return {
      amountVal: '100',
      disabled: false,
      //充值参数
      rechargeParams: {
        "totalAmt": '100', //金额
        "paymentType": "1", //支付方式[0:微信,1:支付宝,2:余额,3:活动]
        "transType": "0" //交易类型[0:充值,1:消费]
      },
      userData: {},
      centerDialogVisible: false,
      filteredData: [], // 存储过滤后的数据
      pagebean: {
        total: 0,
        pagesize: 10,
        pagenow: 1,
        data: []
      },
      transTypeList: transTypeList
    }
  },
  created() {
    this.queryUser();
    this.doload();
  },
  methods: {
    doload() {
      const that = this;
      this.$axios.get(`http://localhost:9990/orderInfo/order/${this.pagebean.pagenow}/${this.pagebean.pagesize}?uid=${JSON.parse(localStorage.getItem("user")).uid}`)
        .then(response => {
          that.pagebean = response.data;
          that.filteredData = response.data.data; // 初始化过滤后的数据
        });
    },
    //充值金额
    amountChange(val) {
      this.rechargeParams.totalAmt = val;
      if (val == '') {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    //支付方式
    paymentTypeChange(val) {
      this.rechargeParams.paymentType = val
    },
    //确认支付
    async surePay() {
      if (this.rechargeParams.totalAmt == '') {
        this.$message.warning('请输入金额');
        return;
      }

      this.rechargeParams.uid = JSON.parse(localStorage.getItem("user")).uid;
      const res = await this.$axios.post('http://localhost:9990/orderInfo/createOrderInfo?t=' + new Date().getTime(), this.rechargeParams)
      if (res) {
        //支付方式跳转
        if (this.rechargeParams.paymentType == '1') {
          this.$message.success('支付宝支付')
          // 进行支付宝跳转
          const div = document.createElement('div')
          /* 下面的data.content就是后台返回接收到的数据 */
          div.innerHTML = res.data
          document.body.appendChild(div)
          document.forms[0].setAttribute('target', '_blank')
          document.forms[0].submit();
          const parent = div.parentNode;
          if (parent) {
            parent.removeChild(div);
          }
        } else if (this.rechargeParams.paymentType == '2') {
          this.$message.success('余额支付成功');
          this.$router.push({
            name: 'order'
          })
        } else {
          this.$message.success('活动支付')
        }

        this.centerDialogVisible = true;
      } else if (code === 401) {
        this.$message.error(msg)
        this.$router.push({
          name: 'login'
        })
      } else {
        this.$message.error(msg)
      }
    },
    //微信支付
    wechatPay(result) {
      if (result) {
        const orderParams = JSON.parse(result);
        sessionStorage.qrurl = orderParams.qrurl;
        sessionStorage.amt = orderParams.amt;
        sessionStorage.returnUrl = orderParams.returnUrl;
        sessionStorage.order_id = orderParams.order_id;
        this.$router.push({
          name: 'wechatPay'
        })
      }
    },
    queryUser() {
      const that = this;
      this.$axios.get('http://localhost:9990/user/' + JSON.parse(localStorage.getItem("user")).uid)
        .then(response => {
          that.userData = response.data;
        });
    },
    refresh() {
      this.doload();
      this.queryUser();
      this.centerDialogVisible = false;
    },
    handleCurrentChange(val) {
      this.pagebean.pagenow = val;
      this.doload();
    }
  }
}
</script>

<style scoped>
/* 信息列表样式 */
.msg-box > li {
  list-style: none;
  border-bottom: 1px solid #c5c5c5;
  padding: 20px 10px;
}
</style>
